<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息">
            <a-row :gutter="48">
              <a-col :span="8" :hidden="true">
                <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle">
                  <a-input placeholder="请输入标题" :disabled="formDisabled" v-model="model.bpmBizTitle"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billNo">
                  <a-input :disabled="formDisabled" v-model="model.billNo" placeholder="请输入单据编号" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
                  <!-- <select-person-input :disabled="formDisabled" v-model="model.proposer" disabled /> -->
                  <select-user-by-dep :multi="false" v-model="model.proposer" disabled></select-user-by-dep>
                  <!-- :disabled=formDisabled -->
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <!-- <a-form-model-item label="申请人部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
              <a-input :disabled=formDisabled v-model="model.proposerDeptId" placeholder="请输入申请人部门"  ></a-input>
            </a-form-model-item> -->
                <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
                  <j-select-depart :disabled="formDisabled" v-model="model.proposerDeptId" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="申请日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
                  <a-input v-model="model.createTime" placeholder="请输入申请日期" disabled ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="belongTeam">
                  <!-- <a-input :disabled=formDisabled v-model="model.belongTeam" placeholder="请输入所属团队"  ></a-input> -->
                  <select-team-input
                    :disabled="formDisabled"
                    v-model="model.belongTeam"
                    :tdlx="3"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
            <a-form-model-item label="关联员工档案" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="correlationPeopleRecord">
              <select-user-by-dep @change="getlevel"  :multi="false" v-model="model.correlationPeopleRecord" @back="userBack"></select-user-by-dep>
            </a-form-model-item>
          </a-col> -->
              <a-col :span="8">
                <a-form-model-item label="薪级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="payGrades">
                  <!-- <a-input :disabled=formDisabled v-model="model.payGrades" placeholder="请输入薪级"  ></a-input> -->
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    v-model="model.payGrades"
                    placeholder="请选择薪级"
                    dictCode="erp_pay_grade,salary_grade,id,del_flag = 0 and audit_status=2 order by sort"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carNumber">
                  <a-input :disabled="formDisabled" v-model="model.carNumber" placeholder="请输入车牌号" :maxLength="10" ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="job" >
                  <!-- <j-dict-select-tag :disabled=formDisabled type="list" v-model="model.job" dictCode="job_level_car" placeholder="请选择职务" /> -->
                  <!-- <a-select v-model="model.job" @change="changeAList()"  placeholder="请选择职务">
                    <a-select-option v-for="item in jobOptions" :value="item.value"  :key="item.value">{{item.text}}</a-select-option>
                  </a-select> -->
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    type="list"
                    v-model="model.job"
                    dictCode="erp_org_position_level,level_name,id,del_flag='0' and audit_status='2'"
                    placeholder="请选择职务级别"
                    disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="对应薪级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="parallelismPayGrades" >
                  <j-dict-select-tag
                    :disabled="formDisabled"
                    type="list"
                    v-model="model.parallelismPayGrades"
                    @input="salaryChangeHandle"
                    dictCode="salary_level"
                    placeholder="请选择对应薪级" />
                  <!-- <j-dict-select-tag :disabled=formDisabled type="list" v-else v-model="model.parallelismPayGrades" dictCode="salary_level_vice" placeholder="请选择对应薪级" /> -->
                  <!-- <a-select v-model="model.parallelismPayGrades" @change="changeBList()" placeholder="请选择薪级">
                    <a-select-option v-for="item in salaryLevelOptions" :value="item.value" :key="item.value">{{item.text}}</a-select-option>
                  </a-select> -->
                </a-form-model-item>
              </a-col>
              <a-col :span="8" >
                <a-form-model-item label="车贴（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="carSubsidy">
                  <a-input-number
                    :disabled="formDisabled"
                    :max="99999999"
                    :min="0"
                    v-model="model.carSubsidy"
                    placeholder="请输入车贴"
                    style="width: 100%" />
                  <!--              <a-input :disabled="formDisabled" v-model="model.carSubsidy" placeholder="请输入车贴"></a-input>-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == null || model.parallelismPayGrades == undefined " @input="handleInput" :disabled=formDisabled type="list"  :key="6"  v-model="model.carSubsidy" placeholder="请选择车贴" />-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '0'" :disabled=formDisabled type="list"  :key="0" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_1_3" placeholder="请选择车贴" />-->
                  <!--              &lt;!&ndash; <j-dict-select-tag v-if="model.parallelismPayGrades == '0' || model.parallelismPayGrades == null " :disabled=formDisabled type="list"  :key="0"  v-model="model.carSubsidy" dictCode="subsidy_1_3" placeholder="请选择车贴" /> &ndash;&gt;-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '1'" :disabled=formDisabled type="list"  :key="1" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_4_6" placeholder="请选择车贴" />-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '2'" :disabled=formDisabled type="list"  :key="2" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_7_10" placeholder="请选择车贴" />-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '3'" :disabled=formDisabled type="list"  :key="3" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_9_16" placeholder="请选择车贴" />-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '4'" :disabled=formDisabled type="list"  :key="4" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_14_22" placeholder="请选择车贴" />-->
                  <!--              <j-dict-select-tag v-if="model.parallelismPayGrades == '5'" :disabled=formDisabled type="list"  :key="5" @input="handleInput" v-model="model.carSubsidy" dictCode="subsidy_19_40" placeholder="请选择车贴" />-->
                </a-form-model-item>
              </a-col>
              <!--          <a-col :span="8" v-if="model.carSubsidy == 0">-->
              <!--            <a-form-model-item label="其他金额（元）"  :labelCol="labelCol" :wrapperCol="wrapperCol" prop="otherMoney">-->
              <!--              <a-input-number :disabled=formDisabled :max="99999999" :min="0"  v-model.number="model.otherMoney" placeholder="请输入其他金额" style="width: 100%" />-->
              <!--            </a-form-model-item>-->
              <!--          </a-col>-->
              <a-col :span="24">
                <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
                  <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>

          <a-collapse-panel key="2" header="附件信息">
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item prop="attachments">
                  <j-upload :disabled="formDisabled" v-model="model.attachments"></j-upload>
                  <!-- <a-button v-else icon="download" @click="viewFile(model.attachments)">文件列表</a-button> -->
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
    </j-form-container>
    <a-row :gutter="48" v-if="formBpm">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary" @click="onPrint">打印</a-button>
      </a-col>
    </a-row>
    <!-- <view-file-modal ref="viewFileModal"></view-file-modal> -->
    <ErpCarSubsidyFormPrint class="print_style" v-if="formBpm" id="carsubsidyContent" :formData="model" :formDataHistory="formData"></ErpCarSubsidyFormPrint>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import SelectPersonInput from '@/views/scy/components/SelectPersonInput'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'
  import { mapGetters } from 'vuex';
  import moment from 'moment';
  // import { viewFile } from '@/utils/util'
  // import ViewFileModal from '@/views/scy/components/ViewFileModal'
  import CommonFlowList from '@/views/components/CommonFlowList.vue';
  import Print from '@/utils/print/printarea.js';
  import ErpCarSubsidyFormPrint from './ErpCarSubsidyFormPrint.vue'; // 打印定制
  export default {
    name: 'ErpCarSubsidyForm',
    components: {
      SelectUserByDep,
      SelectPersonInput,
      SelectTeamInput,
      // ViewFileModal,
      CommonFlowList,
      ErpCarSubsidyFormPrint
    },
    props: {
      // 流程表单data
      formData: {
        type: Object,
        default: () => {},
        required: false
      },
      // 表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {
          // job: 0,
          // parallelismPayGrades: 0,
          // carSubsidy:
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        activeKey: ['1', '2'],
        validatorRules: {
        // carNumber: [
        //     { required: true, message: '请输入车牌号!', trigger: 'blur'},
        // ],
        belongTeam: [
            { required: true, message: '请选择所属团队!', trigger: 'change' }
        ],
        // otherMoney: [
        //     { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确金额!' },
        // ],
        carNumber: [
            { required: true, message: '请输入车牌号!', trigger: 'blur' }
            // { required: true, pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/, message: '请输入正确车牌!' },
        ],
        job: [
            { required: true, message: '请输入职务!', trigger: 'change' }
        ],
        parallelismPayGrades: [
            { required: true, message: '请选择对应薪级!', trigger: 'change' }
        ],
        carSubsidy: [
            // { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '非法字符!' },
            // { required: true, message: '请输入车贴!'},
          { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的金额！!' }
        ]
        // otherMoney: [
        //     { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确金额!' },
        // ],
        },
        url: {
          add: '/api/erp/workbench/article/erpCarSubsidy/add',
          edit: '/api/erp/workbench/article/erpCarSubsidy/edit',
          queryById: '/api/erp/workbench/article/erpCarSubsidy/queryById',
          gainBillNo: '/api/erp/workbench/article/erpCarSubsidy/getBillNo',
          queryRecordById: '/api/erp/files/employee/erpEmployeeFile/queryFileById'
        },
        userName: '',
        salaryDictList: []
      }
    },
    computed: {
      formDisabled() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton() {
        if (this.formBpm === true) {
          if (this.formData.disabled === false) {
            return true
          }
        }
        return false
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.showFlowData();
      this.initDictConfig();
    },
    methods: {
      ...mapGetters(['userInfo']),

      // 加载数据字典信息
      backUserInfo(data) {
        // this.model.applicant = data[0].orgDepart;//申请人单位
        this.model.departId = data[0].departmentId;// 申请人部门
      },
      // 选择对应薪级带出车贴
      salaryChangeHandle(v) {
        if (this.salaryDictList) {
          let temp = this.salaryDictList.filter(item => item.value == v)
          this.$set(this.model, 'carSubsidy', temp[0].value)
        }
      },
      initDictConfig() {
        initDictOptions('salary_level').then((res) => {
          if (res.success) {
            this.salaryDictList = res.result
          }
        })
      },
      getUserRecord(empId) {
        let params = { id: empId };
        getAction(this.url.queryRecordById, params).then((res) => {
          if (res.success) {
            this.$set(this.model, 'payGrades', res.result.payGradeId)
            this.$set(this.model, 'job', res.result.positionLevelId)
          }
        })
      },
      // 渲染流程表单数据
      showFlowData() {
        if (this.formBpm === true) {
          let params = { id: this.formData.dataId };
          getAction(this.url.queryById, params).then((res) => {
            if (res.success) {
              this.edit(res.result);
            }
          });
        }
      },
      // 生成单据编号
      getBillNo () {
        getAction(this.url.gainBillNo).then((res) => {
          if (res.success) {
            // that.model.billNo = res.result//单据编号
            this.$set(this.model, 'billNo', res.result)
            // 流程标题添加
            this.$set(this.model, 'bpmBizTitle', this.userName + '-' + this.model.billNo);
          }
        })
      },
      // 薪级变动 置空车贴
      // gradesBlur(item) {
      //   this.$set(this.model,'carSubsidy', null)
      // },
      add () {
        this.edit(this.modelDefault);
        this.userName = this.userInfo().empName;// 当前登录人名称
        this.getBillNo();
        this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
        this.model.proposerDeptId = this.userInfo().deptId; // 当前登录人部门
        this.model.proposer = this.userInfo().empId; // 获取经办人id
        this.getUserRecord(this.userInfo().empId);
      },
      // 车贴变动时置空其他金额
      // handleInput(){
      //   this.$set(this.model,'otherMoney',0);
      // },
      edit (record) {
        this.$refs.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
      },

      submitForm(type) {
      const that = this;
      if (type == 'draft') {
        // 代表保存草稿不做校验
        this.submit(type)
      } else if (type == 'submit') {
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.submit(type)
          } else {
            that.$emit('unButtonDisable')
          }
        })
      } else {
        console.log('传参数，保存：draft，提交：submit')
      }
    },
    submit (type) {
      const that = this;
      that.confirmLoading = true;
      let httpurl = '';
      let method = '';
      if (!this.model.id) {
        httpurl += this.url.add;
        method = 'post';
      } else {
        httpurl += this.url.edit;
          method = 'put';
      }
      httpAction(httpurl, this.model, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          if (method == 'post') {
            that.model.id = res.result;
          }
          that.$emit('ok', type, that.model);
        } else {
          that.$message.warning(res.message);
          that.$emit('unButtonDisable');
        }
      }).catch((error) => {
        that.$emit('unButtonDisable', error);
      }).finally(() => {
        that.confirmLoading = false;
      })
    },

      // 点击打印
    onPrint () {
      let print = new Print({
        el: '#carsubsidyContent',
        popTitle: '车辆补贴申请详情 · 禾美环保',
        endCallback() {

        }
      })
    }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';

  /** Button按钮间距 */
  .btns {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .drawer-footer{
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
<style>
  @import "../../../../../utils/print.css";
  .print_style{
  position: absolute;
  top: 0;
  z-index: -1111;
}
</style>
